<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	[v-cloak]{
		display: none;
	}
	input{
		width: 300px;
		height: 50px;
	}
	img{
		width: 400px;
		height: 400px;
	}
	.sty1{
		width: 400px;
		height: 400px;
	}
	.sty2{
		width: 400px;
		height: 400px;
		border-radius: 50%
	}
</style>
<body>
	<div id="boss">
		<h1>{{ tit }}</h1>
		<p v-text="ele +' '+ tit"></p>
		<p v-text="ele + ' '+'....'"></p>
		<p v-text="arr[1]"></p>
		<p v-html="str"></p>
		<p v-html="arr[0]"></p>
		<p v-cloak>{{hh}}</p>
		<img v-bind:src="img" :title="data" :width="w">
		<br>
		 <input type="text" v-model='ele' >
		 <br>
		 <p>{{ele}}</p>
		 <br>
		 <br>
		 <br>
		 <img :src="src" alt="" :class="c">
		 <br>
		 <br>
		 图片1：<input type="radio" name="i" v-model="src" value="2.jpg">
		 图片2：<input type="radio" name="i" v-model="src" value="1.jpg">
		 <br>
		 选项1：<input type="radio" name="d" v-model="c" value="sty1" >
		 选项2：<input type="radio" name="d" v-model="c" value="sty2">
	</div>
	<script src="./vue.js"></script>

	<script>
       const vo = new Vue({
       	el:"#boss",
       	data:{
          tit:"999",
          ele:"纵横山河万里，肆意九州五岳",
          str:'<span style="color:blue">不忘初心 我命由我</span>',
          arr:['1','2','3'],
          hh:"伽古拉",
          img:"2.jpg",
          data:'今天的日期：'+new Date().toLocaleString(),
          w:'400',
          src:'2.jpg',
          c:'sty1'
       	}
       })
     
	</script>
</body>
</html>